<template>
  <div class="loginView">
    <my-header name-page="RePOS bot" />
    <div class="loginView__block">
      <my-input
        v-model="APIKey"
        placeholder-input="API Key"
        type-input="text"
      />
      <my-input
        v-model="secretKey"
        placeholder-input="Secret Key"
        type-input="password"
      />
    </div>
    <button @click="login" class="button">Send</button>
    <p class="loginView__linkToInstruction" @click="goToInstruction">
      How to get keys?
    </p>
  </div>
</template>

<script>
import MyInput from "@/components/MyInput.vue";
import MyHeader from "@/components/UI/MyHeader.vue";
import LoginService from "./LoginService.ts";

const tg = window.Telegram.WebApp;

export default {
  name: "LoginPage",
  components: { MyInput, MyHeader },
  data() {
    return {
      userId: tg.initDataUnsafe.user.id,
      APIKey: "",
      secretKey: "",
    };
  },

  methods: {
    showButton() {
      // (this.APIKey.length !== 0 && this.secretKey.length !== 0) ? tg.MainButton.show() : tg.MainButton.hide();
    },
    goToInstruction() {
      this.$router.push("/instruction");
    },
    login() {
      LoginService.login(this.userId, this.APIKey, this.secretKey).then(
        (res) => {
          if (res) {
            window.localStorage.setItem("userRole", "user");
            this.$router.push("/home");
          } else {
            alert("Вы ошиблись в данных");
          }
        }
      );
    },
  },
  updated() {
    this.showButton();
  },
};
</script>

<style scoped>
.loginView {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.loginView__block {
  margin-top: 20%;
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loginView__linkToInstruction {
  text-decoration: var(--tg-theme-text-color);
  text-decoration-line: underline;
  text-align: right;
  font-size: 17px;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  color: var(--tg-theme-text-color);
}

.button {
  background-color: var(--tg-theme-button-color);
  color: var(--tg-theme-button-text-color);
  height: 40px;
  width: 40%;
  margin-top: 20px;
  margin-left: 30%;
  margin-bottom: 10px;
  border-radius: 12px;
  outline: none;
}
</style>